<template>
  <div class="main">
    Home
    <button @click="exit">退出</button>
    <button @click="login">Login</button>
    <div class="info">
      <div class="item">
        <p>id:</p>
        <input type="text" v-model="userInfo.id" />
      </div>
      <div class="item">
        <p>username:</p>
        <input type="text" v-model="userInfo.username" />
      </div>
      <div class="item">
        <p>nickname:</p>
        <input type="text" v-model="userInfo.nickname" />
      </div>
      <div class="item">
        <p>email:</p>
        <input type="text" v-model="userInfo.email" />
      </div>
      <div class="item">
        <p>user_pic:</p>
        <input type="text" v-model="userInfo.user_pic" />
      </div>
      <button @click="changeUserInfo">修改用户信息</button>
    </div>

    <div class="info">
      <div class="item">
        <p>原密码:</p>
        <input type="text" v-model="oldPwd" />
      </div>
      <div class="item">
        <p>新密码:</p>
        <input type="text" v-model="newPwd" />
      </div>
      <button @click="changepsw">修改密码</button>
    </div>
    <div class="info">
      根据文章id获取文章分类
      <div class="item">
        <p>文章id:</p>
        <input type="text" v-model="cateId" />
      </div>
      <div class="item">
        <p>名称:</p>
        <input type="text" v-model="cateInfo.name" />
      </div>
      <div class="item">
        <p>别名:</p>
        <input type="text" v-model="cateInfo.alias" />
      </div>
      <button @click="getCate">获取</button>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import {
  getUserInfo,
  updateUserInfo,
  changePassword,
} from "../api/userInfo/index";
import { getCateById } from "../api/artcate/index";
export default {
  name: "Home",
  data() {
    return {
      userInfo: {
        id: 0,
        username: "",
        nickname: "",
        email: "",
        user_pic: "",
      },
      oldPwd: "",
      newPwd: "",
      cateId: null,
      cateInfo:{
        name:"",
        alias:'',
      }
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    exit() {
      this.$store.commit("clear");
      this.$router.push("/login");
    },
    login() {
      this.$router.push("/login");
    },
    getUserInfo() {
      getUserInfo().then((res) => {
        //console.log(res.data);
        this.userInfo = res.data;
      });
    },
    changeUserInfo() {
      updateUserInfo(this.userInfo).then((res) => {
        Notify({ type: "success", message: res.message });
      });
    },
    changepsw() {
      changePassword(this.oldPwd, this.newPwd).then((res) => {
        Notify({ type: "success", message: res.message });
      });
    },
    getCate() {
      getCateById(this.cateId).then((res) => {
        this.cateInfo.name = res.data.name;
        this.cateInfo.alias = res.data.alias;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 40px;
  .info {
    width: 300px;
    padding: 0 15px;
    margin: 20px 0;
    border: 1px solid rgb(37, 204, 255);
    .item {
      display: flex;
      margin: 10px 0;
      input {
        margin-left: 5px;
      }
    }
    button {
      margin: 10px 0;
    }
  }
}
</style>